<template>
  <view class="page">
    <view class="flex text-df  justify-between bg-white padding type-box">
      <text class="text-999">已选开店套餐</text>
      <text class="" v-if="type == 0">初级店铺</text>
      <text class="" v-if="type == 1">中级店铺</text>
      <text class="" v-if="type == 2">高级店铺</text>
    </view>
    <view class="bg-white padding-tb solid-bottom" style="width: calc(100% - 60rpx);margin: 0 30rpx;">
      <view class="text-333 text-df padding-bottom-sm">{{i18n['申请信息']}}</view>
      <view class="flex justify-between">
        <view class="apply-type" :class="{ active: info.apply_type == 2 }" @click="handlerChoose(2)">{{i18n['公司']}}
        </view>
        <view class="apply-type" :class="{ active: info.apply_type == 1 }" @click="handlerChoose(1)">{{i18n['个人']}}
        </view>
      </view>
    </view>
    <block v-if="info.apply_type == 2">
      <view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['公司名称']}}</view>
        <view class="_right text-right"><input type="text" :placeholder="i18n['请输入公司名称']" v-model="info.company_name"
            placeholder-class="placeholder" maxlength="16"/></view>
      </view>
      <view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['公司所在地']}}</view>
        <view class="_right text-right flex align-center justify-end" @click="showMulLinkageThreePicker" >
          <text class="text-bf" v-if="!addr">{{i18n['请选择省市区县']}}</text>
          <text class="text-333" v-else>{{ addr }}</text>
          <text class="cuIcon-right margin-left-xs"></text>
        </view>
      </view>
      <view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['公司详情地址']}}</view>
        <view class="_right text-right"><input type="text" :placeholder="i18n['请输入详细地址']" v-model="info.company_address"
            placeholder-class="placeholder" /></view>
      </view>
      <view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['统一社会信用码']}}</view>
        <view class="_right text-right"><input type="text" :placeholder="i18n['请输入统一社会信用码']" v-model="info.credit_code"
            placeholder-class="placeholder" maxlength="18"/></view>
      </view>
      <view class="shop-item bg-white padding-tb text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['营业执照']}}</view>
        <view class="_right text-right flex justify-end">
          <image  src="../../static/upload-img.png" class="up-img" @click="upLoadImg(1, 'license')" v-if="!licenseThumb.id"></image>
          <view class="img-wrap" v-else>
            <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('license')"></text>
            <image class="img" :src="licenseThumb.path" mode="aspectFit"></image>
          </view>
        </view>
      </view>
      <view class="shop-item bg-white height-100 text-df flex justify-between align-center">
        <view class="_left">{{i18n['法定经营范围']}}</view>
        <view class="_right text-right"><input type="text" :placeholder="i18n['请输入法定经营范围']" v-model="info.range"
            placeholder-class="placeholder" /></view>
      </view>
	  <view style="height: 20rpx;background: #f8f8f8;"></view>
      <view
        class="shop-item bg-white height-100 margin-top-sm text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['法人姓名']}}</view>
        <view class="_right text-right"><input type="text" :placeholder="i18n['请输入姓名']" v-model="info.contacts_name"
            placeholder-class="placeholder" maxlength="6"/></view>
      </view>
      <view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['法人手机']}}</view>
        <view class="_right text-right">
          <input type="number" maxlength="11" :placeholder="i18n['请输入手机号']" v-model="info.contacts_phone"
            placeholder-class="placeholder" />
        </view>
      </view>
      <view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['法人身份证']}}</view>
        <view class="_right text-right flex justify-end">
          <input type="idcard" :placeholder="i18n['请输入身份证号']" v-model="info.idcard_no"
            placeholder-class="placeholder" />
        </view>
      </view>
      <view class="shop-item bg-white padding-tb text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['法人身份证正面']}}</view>
        <!-- <view class="_right text-right flex justify-end">
          <view class="up-img" @click="upLoadImg(1, 'positive')" v-if="!positiveThumb.id"></view>
          <view class="img-wrap" v-else>
            <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('positive')"></text>
            <image class="img" :src="positiveThumb.path" mode="aspectFit"></image>
          </view>
        </view> -->
        <view class="_right text-right flex justify-end">
          <image  src="../../static/upload-img.png" class="up-img" v-if="!perPositiveThumb.id" @click="upLoadImg(1, 'perPositive')"></image>
          <view class="img-wrap" v-else>
            <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('perPositive')"></text>
            <image class="img" :src="perPositiveThumb.path" mode="aspectFit"></image>
          </view>
        </view>
      </view>
      <view class="shop-item bg-white padding-tb text-df flex justify-between align-center ">
        <view class="_left">{{i18n['法人身份证反面']}}</view>
        <!-- <view class="_right text-right flex justify-end">
          <view class="up-img" @click="upLoadImg(1, 'otherSide')" v-if="!otherSideThumb.id"></view>
          <view class="img-wrap" v-else>
            <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('otherSide')"></text>
            <image class="img" :src="otherSideThumb.path" mode="aspectFit"></image>
          </view>
        </view> -->
        <view class="_right text-right flex justify-end">
          <image  src="../../static/upload-img.png" class="up-img" v-if="!perOtherSideThumb.id" @click="upLoadImg(1, 'perOtherSide')"></image>
          <view class="img-wrap" v-else>
            <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('perOtherSide')"></text>
            <image class="img" :src="perOtherSideThumb.path" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </block>
    <block v-else>
      <view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['联系人姓名']}}</view>
        <view class="_right text-right"><input type="text" :placeholder="i18n['请输入姓名']" v-model="info.contacts_name"
            placeholder-class="placeholder" /></view>
      </view>
      <view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['联系人手机']}}</view>
        <view class="_right text-right">
          <input type="number" maxlength="11" :placeholder="i18n['请输入手机号']" v-model="info.contacts_phone"
            placeholder-class="placeholder" />
        </view>
      </view>
      <view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['联系人身份证']}}</view>
        <view class="_right text-right"><input type="idcard" :placeholder="i18n['请输入身份证号']" v-model="info.idcard_no"
            placeholder-class="placeholder" /></view>
      </view>
      <view class="shop-item bg-white padding-tb text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['联系人身份证正面']}}</view>
        <view class="_right text-right flex justify-end">
          <image class="up-img" src="../../static/upload-img.png" mode="" v-if="!perPositiveThumb.id" @click="upLoadImg(1, 'perPositive')"></image>
          <view class="img-wrap" v-else>
            <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('perPositive')"></text>
            <image class="img" :src="perPositiveThumb.path" mode="aspectFit"></image>
          </view>
        </view>
      </view>
      <view class="shop-item bg-white padding-tb text-df flex justify-between align-center ">
        <view class="_left">{{i18n['联系人身份证反面']}}</view>
        <view class="_right text-right flex justify-end">
          <image  src="../../static/upload-img.png" class="up-img" v-if="!perOtherSideThumb.id" @click="upLoadImg(1, 'perOtherSide')"></image>
          <view class="img-wrap" v-else>
            <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('perOtherSide')"></text>
            <image class="img" :src="perOtherSideThumb.path" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </block>
    <view class="btn-wrap flex justify-between align-center padding-tb-xl">
      <view class="btn" @click="handlerPre">{{i18n['上一步']}}</view>
      <view class="btn active" @click="handlerNext">{{i18n['下一步']}}</view>
    </view>
    <w-picker mode="region" :value="defVal" default-type="label" themeColor="#D72620" @confirm="onConfirm($event)"
      ref="region">{{i18n['请选择省市区']}}</w-picker>
  </view>
</template>

<script>
  // @see 引入验证，上传图片
  import {
    UploadImage,
    validate
  } from '@/common/utils/index';
  import wPicker from '../../components/w-picker/w-picker.vue';
  export default {
    components: {
      wPicker
    },
    data() {
      return {
        // 营业执照
        licenseThumb: {},
        // 法人身份证正面
        positiveThumb: {},
        // 法人身份证反面
        otherSideThumb: {},
        // 个人身份证正面
        perPositiveThumb: {},
        // 个人身份证反面
        perOtherSideThumb: {},
        defVal: [], // 默认地址
        addr: '', //地址
        info: {
          contacts_name: '', //联系人/法人
          contacts_phone: '', //联系人电话
          idcard_no: '', //身份证号
          idcard_front: '', //	身份证正面
          idcard_reverse: '', //身份证反面
          company_name: '', //公司名称
          company_province_id: '', //公司所在省ID
          company_city_id: '', //公司所在市ID
          company_district_id: '', //公司所在区ID
          company_address: '', //公司详细地址
          credit_code: '', //公司社会统一信用码
          business_licence: '', //营业执照
          range: '', //	经营范围
          apply_type: 1 //申请类型 1个人2公司
        },
        type: ''
      };
    },
    onLoad(option) {
      this.type = option.type
    },
    methods: {
      /**
       * @func 显示地址选择弹窗
       */
      showMulLinkageThreePicker() {
        uni.hideKeyboard();
        this.$refs.region.show();
      },
      /**
       * @description 地址选择回调
       * @param {Object} val = 地址信息对象
       */
      onConfirm(val) {
        console.log(val);
        this.info.company_province_id = val.value[0];
        this.info.company_city_id = val.value[1];
        this.info.company_district_id = val.value[2];
        this.addr = val.result;
        if (val.obj.province.label == val.obj.city.label) this.addr = val.obj.city.label + val.obj.area.label;
      },
      // 选择申请类型
      handlerChoose(type) {
        this.info.apply_type = type;
      },
      // 上一步
      handlerPre() {
        uni.navigateBack({
          delta: 1
        });
      },
      // 下一步
      handlerNext() {
        if (this.checkData()) {
          return this.$message.info(this.checkData());
        }
        let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
        let store_user_id = uni.getStorageSync('store_user_id') || 0;
        this.$api
          .post(global.apiUrls.authentication, this.info, {
            header: {
              Storeid: store_joinin_id,
              Userid: store_user_id
            }
          })
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {
              uni.navigateTo({
                url: '/pages/goods/shop/shop-card/index'
              });
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
      checkData() {
        let info = this.info;
        let str = '';
        if (info.apply_type == 1) {
          if (!info.contacts_name.trim()) return (str = this.i18n['请输入姓名']);
          if (!info.contacts_phone.trim()) return (str = this.i18n['请输入手机号']);
          if (!validate(info.contacts_phone, 'phone')) return (str = this.i18n['手机号输入有误']);
          if (!info.idcard_no.trim()) return (str = this.i18n['请输入身份证号']);
          if (!validate(info.idcard_no, 'idcard')) return (str = this.i18n['身份证号输入有误']);
          if (!info.idcard_front) return (str = this.i18n['请上传身份证正面']);
          if (!info.idcard_reverse) return (str = this.i18n['请上传身份证反面']);
        }
        if (info.apply_type == 2) {
          if (!info.company_name.trim()) return (str = this.i18n['请输入公司名称']);
          if (!this.addr) return (str = this.i18n['请选择公司所在地']);
          if (!info.company_address.trim()) return (str = this.i18n['请输入公司详细地址']);
          if (!info.credit_code.trim()) return (str = this.i18n['请输入社会统一信用码']);
          if (!validate(info.credit_code, "paragraph")) return (str = this.i18n['社会统一信用码有误']);
          if (!info.business_licence.trim()) return (str = this.i18n['请上传营业执照']);
          if (!info.range.trim()) return (str = this.i18n['请输入经营范围']);
          if (!info.contacts_name.trim()) return (str = this.i18n['请输入姓名']);
          if (!info.contacts_phone.trim()) return (str = this.i18n['请输入手机号']);
          if (!validate(info.contacts_phone, 'phone')) return (str = this.i18n['手机号输入有误']);
          if (!info.idcard_no.trim()) return (str = this.i18n['请输入身份证号']);
          if (!validate(info.idcard_no, 'idcard')) return (str = this.i18n['身份证号输入有误']);
          if (!info.idcard_front) return (str = this.i18n['请上传身份证正面']);
          if (!info.idcard_reverse) return (str = this.i18n['请上传身份证反面']);
        }
      },
      /**
       * @param num 一次最多上传几张
       * @param type license 营业执照  positive 法人身份证正面  otherSide 法人身份证反面  perPositive联系人身份证正面 perOtherSide 联系人身份证反面
       * @param max 最多上传多上张图片
       */
      upLoadImg(num, type, max = 1) {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
          success: res => {
            console.log(res);
            let list = res.tempFilePaths;
            list.forEach((val, i) => {
              this.uploadUserImg(val, type, list, i);
            });
          }
        });
      },
      /**
       * @description 上传图片
       */
      uploadUserImg(blob, type, list, i) {
        // uni.showLoading();
        let _this = this;
        // 开始上传
        new UploadImage([blob], {
          complete: res => {
            console.log(res);
            if (res.length) {
              if (type == 'license') {
                this.licenseThumb = res[0];
                this.info.business_licence = res[0].id;
              }
              if (type == 'positive') {
                this.positiveThumb = res[0];
                this.info.idcard_front = res[0].id;
              }
              if (type == 'otherSide') {
                this.otherSideThumb = res[0];
                this.info.idcard_reverse = res[0].id;
              }
              if (type == 'perPositive') {
                this.perPositiveThumb = res[0];
                this.info.idcard_front = res[0].id;
              }
              if (type == 'perOtherSide') {
                this.perOtherSideThumb = res[0];
                this.info.idcard_reverse = res[0].id;
              }
            }
          }
        });
      },
      clearImg(type) {
        if (type == 'license') {
          this.licenseThumb = {};
          this.info.business_licence = '';
        }
        if (type == 'positive') {
          this.positiveThumb = {};
          this.info.idcard_front = '';
        }
        if (type == 'otherSide') {
          this.otherSideThumb = {};
          this.info.idcard_reverse = '';
        }
        if (type == 'perPositive') {
          this.perPositiveThumb = {};
          this.info.idcard_front = '';
        }
        if (type == 'perOtherSide') {
          this.perOtherSideThumb = {};
          this.info.idcard_reverse = '';
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  page,body,.page{
    background-color: #FFFFFF;
	min-height: 100vh;
    padding-bottom: 200rpx;
  }

  .type-box {
    border-bottom: solid 20rpx #F8F8F8;
  }

  .apply-type {
    width: 300rpx;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    background-color: #F8F8F8;
    border-radius: 4rpx;

    &.active {
      border: 1px solid $theme;
      color: $theme;
    }
  }

  .height-100 {
    height: 100rpx;
  }

  .placeholder {
    color: #bfbfbf;
    font-size: 28rpx;
  }

  .text-bf {
    color: #bfbfbf;
  }

  .shop-item {
	  width: calc(100% - 60rpx);
	  margin: 0 30rpx;
    ._left {
      width: 300rpx;
    }

    ._right {
      width: calc(100% - 300rpx);

      .up-img {
        width: 320rpx;
        height: 150rpx;
      }

      .img-wrap {
        width: 320rpx;
        height: 150rpx;
        border: 1px dashed #eeeeee;
        position: relative;

        .close {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0 ;
    right: 0;
    background-color: #FFFFFF;
	width: calc(100% - 60rpx);
	margin: 0 30rpx;
    .btn {
      width: 300rpx;
      height: 88rpx;
      line-height: 86rpx;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      background: #ffffff;
      color: $theme;
      border-radius: 8rpx;
      border: 1px solid $theme;

      &.active {
        background: $bgtheme;
        color: #ffffff;
      }
    }
  }
</style>
